<template>
	<view class="container">
		<view class="head">
			<text>工具</text>
		</view>

		<view class="backlog">
			<lxCalendar @change="change"></lxCalendar>
		</view>

		<view class="other">
			<view class="content ai">
				<image src="https://statics.moonshot.cn/kimi-chat/static/01.0245bc9d.png" mode=""></image>
				<text>AI问答</text>
				<text class="hint">学习小助手</text>
			</view>
			<view class="content lab">
				<image src="../../static/实验室.png" mode=""></image>
				<text>实验室</text>
				<text class="hint">模拟、分析、直观感受</text>
			</view>
			<view class="content counter">
				<image src="../../static/计算器.png" mode=""></image>
				<text>计算器</text>
				<text class="hint">内置了物理常数</text>
			</view>
			<view class="content manuscript">
				<image src="../../static/草稿纸.png" mode=""></image>
				<text>稿纸</text>
				<text class="hint">记录灵感</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import lxCalendar from '../../components/lx-calendar/lx-calendar.vue'

	function change(e) {
		console.log(e);
	}
</script>

<style scoped>
	.container {
		display: flex;
		flex-direction: column;
	}

	.head {
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		background-color: #FAFAFA;
		border-bottom: 2rpx #E6E6E6 solid;
	}

	.head text {
		padding: 40rpx;
		font-size: 35rpx;
		color: #474747;
		font-weight: 600;
	}

	.backlog {
		width: 100%;
	}

	.other {
		column-count: 2;
		column-gap: 20rpx;
		padding: 40rpx;
	}

	.content {
		display: flex;
		flex-direction: column;
		padding: 40rpx;
		border-radius: 8rpx;
	}

	.content image {
		width: 50rpx;
		height: 50rpx;
	}

	.ai {
		background-color: #E7F8FF;
	}

	.lab {
		margin-top: 40rpx;
		background-color: #E2D3FA;
	}

	.counter {
		background-color: #E5FAF7;
	}

	.manuscript {
		margin-top: 40rpx;
		background-color: #FEF3E4;
	}

	.hint {
		color: #6D7B7D;
		font-size: 24rpx;
	}
</style>